import { Tabs, Image } from 'antd-mobile';
import { useHistory } from "react-router-dom";
import { EyeOutline } from 'antd-mobile-icons';
import Sty from "../../../style/square/index.module.css";
import { useEffect, useState } from 'react';
import Unit from "../../../unit/unit"



export default () => {

  let history = useHistory();
  // 
  useEffect(() => {
    Unit.getApi2("http://localhost:8888/api/publish", { big_type: '商品' }).then(res => {
      let a = res.data.data.map((item:any,index:any) => {
        return {...item,img_url:JSON.parse(item.img_url)}
      })
      setProvideData(a)
    } )
  
  }, [])

  const [ProvideData, setProvideData]: any = useState([{
    id: 1, title: '卡通金属文具盒', type: '图书文具', time: '2019-8-20', des: '这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我...', price: 123, img_url: [require('../../../images/wjh.png').default, require('../../../images/wjh.png').default,
    require('../../../images/wjh.png').default], nick_name: '你得支棱起来啊', nick_attr: require("../../../images/20211220102552.jpg").default, fans: 123, follow: 123, fabulous: 123, see: 123, comment: 123
  }, {
    id: 2, title: '卡通金属文具盒', type: '图书文具', time: '2019-8-20', des: '这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我...', price: 123, img_url: [require('../../../images/wjh.png').default, require('../../../images/wjh.png').default,
    require('../../../images/wjh.png').default], nick_name: '你得支棱起来啊', nick_attr: require("../../../images/20211220102552.jpg").default, fans: 123, follow: 123, fabulous: 123, see: 123, comment: 123
  }, {
    id: 3, title: '卡通金属文具盒', type: '图书文具', time: '2019-8-20', price: 123, des: '这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我...', img_url: [require('../../../images/wjh.png').default, require('../../../images/wjh.png').default,
    require('../../../images/wjh.png').default], nick_name: '你得支棱起来啊', nick_attr: require("../../../images/20211220102552.jpg").default, fans: 123, follow: 123, fabulous: 123, see: 123, comment: 123
  }])
  const goDetail = (ind: any) => {
    history.push({ pathname: `/squaredetail/${ind}`, state: ProvideData[ind] })

  }
  const ProvideList = () => {
    return ProvideData.map((item: any, index: any) => {
      return <li className={Sty.provide_list} key={item.id} onClick={() => { goDetail(index) }}>
        <div className={Sty.p_t}>
          <div className={Sty.p_t_l}>
            {/* 标题 */}
            <p className={Sty.p_t_l_t}>{item.title}</p>
            {/* 类型 */}
            <div className={Sty.p_t_l_t_typeBox}>
              <div >{item.type}</div>
              <div className={Sty.price}>￥{item.price}</div>
            </div>
            {/* 类型盒子 */}
          </div>

          <div className={Sty.p_t_r}>发布时间:{item.time.substr(0, item.time.indexOf('T'))}</div>
        </div>
        <div className={Sty.content}>{item.des}</div>
       
        
        <div className={Sty.imgs}>
          {item.img_url.map((value: any, index: any) => <img key={index} src={'http://localhost:8888/'+value.src} />)}
        </div>
        {/* 下部分 */}
        <div className={Sty.user}>
          <div className={Sty.user_l_box}>
            <div className={Sty.user_l}>
              <Image
                src={item.nick_attr}
                width={32}
                height={32}
                fit='cover'
                style={{ borderRadius: 16 }} />
            </div>
            <div className={Sty.user_r}>
              <p>{item.nick_name}</p>
              <p className={Sty.user_r_b}><span>粉丝:{item.fans}</span>关注:{item.follow}<span></span></p>
            </div>
          </div>
          <div className={Sty.user_r_box}>
            <div> <i className={Sty.fabulous}></i><span>{item.fabulous}</span></div>
            <div><EyeOutline fontSize={12} /><span></span>{item.see}</div>
            <div><i className={Sty.common}></i><span></span>{item.tc_comment}</div>
          </div>
        </div>
      </li>
    })
  }
  return <>

    <Tabs defaultActiveKey='1' className={Sty.smallTabs}>
      <Tabs.Tab title='推荐' key='1'>
        <ul>

          {ProvideData.length > 0 ? ProvideList() : []}
        </ul>
      </Tabs.Tab>
      <Tabs.Tab title='最新' key='2'>
        2
          </Tabs.Tab>
      <Tabs.Tab title='数码产品' key='3'>
        3
          </Tabs.Tab>
      <Tabs.Tab title='图书文具' key='4'>
        4
          </Tabs.Tab>
      <Tabs.Tab title='服饰鞋包' key='5'>
        5
          </Tabs.Tab>
      <Tabs.Tab title='美妆闲置' key='6'>
        6
          </Tabs.Tab>
      <Tabs.Tab title='体育用品' key='7'>
        7
          </Tabs.Tab>
    </Tabs>

  </>
}